<template>
  <div class="wrap">
   <el-input class="userName" style="width:200px;margin-bottom: 20px" v-model="params.userName" placeholder="请输入姓名"></el-input>
   <el-input class="userID" style="width:200px;margin-bottom: 20px;margin-left: 10px;" v-model="params.userID" placeholder="请输入ID"></el-input>
   <el-button type="warning" style="margin-left: 10px" @click="findBySearch()">查询</el-button>
   <el-button type="primary" style="margin-left: 10px" @click="addUser()">新增</el-button>
    <el-dialog title="新增数据"   width="30%" center :visible.sync="dialogTableVisible">
<!--        <el-table :data="adduser">-->
<!--          <el-table-column property="uesrID" label="日期" width="150"></el-table-column>-->
<!--          <el-table-column property="" label="姓名" width="200"></el-table-column>-->
<!--          <el-table-column property="address" label="地址"></el-table-column>-->
<!--        </el-table>-->
      ID:<el-input style="width: 200px;margin-bottom: 10px;margin-left: 26%" v-model="adduser.userID" placeholder="请输入ID"></el-input>
      <br>
      姓名：<el-input style="width: 200px;margin-bottom: 10px;margin-left: 21%" v-model="adduser.userName" placeholder="请输入姓名"></el-input>
      <br>
      密码：<el-input style="width: 200px;margin-bottom: 10px;margin-left: 21%" v-model="adduser.userPWD" placeholder="请输入密码"></el-input>
      <br>
      电话号码：<el-input style="width: 200px;margin-bottom: 10px;margin-left: 15%" v-model="adduser.userPhone" placeholder="请输入电话"></el-input>
      <br>
      电子邮箱：<el-input style="width: 200px;margin-bottom: 10px;margin-left: 15%" v-model="adduser.userEmail" placeholder="请输入邮箱"></el-input>
      <br>
      用户状态：<el-input style="width: 200px;margin-bottom: 10px;margin-left: 15%" v-model="adduser.isActive" placeholder="请输入用户状态"></el-input>
      <br>
      <el-button style="margin-left: 40%;margin-top: 15px" @click="addUserTwice" type="info" round>添加</el-button>
    </el-dialog>
    <el-button type="text" @click="open"></el-button>
   <div>
       <el-table
       :data="tableData"
       border
       style="width: 100%">
       <el-table-column
       fixed
       prop="userID"
       label="ID"
       width="150">
       </el-table-column>
       <el-table-column
       prop="userName"
       label="姓名"
       width="120">
       </el-table-column>
       <el-table-column
       prop="userPWD"
       label="密码"
       width="200">
       </el-table-column>
       <el-table-column
       prop="userPhone"
       label="电话"
       width="240">
       </el-table-column>
       <el-table-column
       prop="userEmail"
       label="邮件"
       width="300">
       </el-table-column>
       <el-table-column
       prop="isActive"
       label="是否在线"
       width="120">
       </el-table-column>
       <el-table-column
       fixed="right"
       label="操作"
       width="100">
       <template #default="scope">
           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
           <el-button type="text" style="color: red" @click="userDelete(scope.$index)" size="small">删除</el-button>
       </template>
       </el-table-column>
       </el-table>
   </div>
   <!-- <div style="margin-top:10px;" class="block">
   <el-pagination
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="currentPage4"
     :page-sizes="[100, 200, 300, 400]"
     :page-size="100"
     layout="total, sizes, prev, pager, next, jumper"
     :total="400">
   </el-pagination>
 </div> -->
  </div>
 </template>
 
<script>
import axios from 'axios';
 export default {
   data() {
     return {
       params: {
         userID: '',
         userName: ''
       },
       tableData: [
       ],
       adduser:{
         userID: '',
         userName: '',
         userPWD: '',
         userEmail: '',
         userPhone: '',
         isActive: ''
       },
       dialogTableVisible: false
     }
  },
  mounted() {
      axios.get('http://localhost:9090/user/select/allOrder').then(res =>{
        this.tableData = res.data.data
        // res.data = {
        //   code: '200',
        //   msg: '请求成功',
        //   data: {

        //   }
        // }
      })
  },
  created() {
      this.load();
  },
  methods: {
    load() {
      // request.get(url: "/").then(res =>{
      //     if(res.code === '0') {
      //         this.tableData = res.data;
      //      });
      //  }   else{
      //
      //      });
      //  }
      // });
      //
    },
    findBySearch() {
      axios.get('http://localhost:9090/user/selectByUserID/' + this.params.userID)
          .then(response => {

            console.log(response.data);
            this.tableData = response.data.data;
          })
          .catch(error => console.log('error', error));
      axios.get('http://localhost:9090/user/selectByUserName/' + this.params.userName)
          .then(response => {

            console.log(response.data);
            this.tableData = response.data.data;
          })
          .catch(error => console.log('error', error));
    },
    addUser() {
      console.log('kkkkkk')
      this.dialogTableVisible = true;
      // axios.post('http://localhost:9090/user/add',)
    },
    addUserTwice() {
      axios.post('http://localhost:9090/user/add',this.adduser).then(res =>{
        console.log(res);
        this.dialogTableVisible = false;
        // this.$route.go(0);
      })
    },
    userDelete(index) {
      // let IsorNot = 0;
      // open()
      // {
      //   this.$alert('你确定要删除吗', {
      //     confirmButtonText: '确定',
      //     callback: action => {
      //       this.$message({
      //         type: 'info',
      //         IsorNot: 1,
      //         message: `action: ${action}`
      //       });
      //     }
      //   });
      // }
      axios.delete('http://localhost:9090/user/delete/' + this.tableData[index].userID).then(res => {
        console.log(res);
      }).catch(error => console.log('error', error));
    }
  }
 }
</script>
<style>

</style>